<template>

    <el-container>
        <el-header>
            <div class="total">
                <img :src="img" class="logo">
                <div class="s1">租好房</div>
                <div class="s2">
                    <!-- 下拉菜单 -->
                    <el-dropdown @command="handleCommand" trigger="click">
                        <!-- 下拉菜单的触发器，这里使用了一个按钮 -->
                        <el-button type="danger">
                            用户 <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <!-- 下拉菜单内容 -->
                        <el-dropdown-menu slot="dropdown">
                            <!-- 修改密码选项 -->
                            <el-dropdown-item @click.native="handleCommand('ChangePassword')" icon="el-icon-edit">
                                修改密码
                            </el-dropdown-item>
                            <!-- 退出登录选项 -->
                            <el-dropdown-item @click.native="handleCommand('LoginOut')" icon="el-icon-refresh-left">
                                退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-main style="padding: 0">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            text-color="#000000" active-text-color="#FFFFFF">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">房源信息</el-menu-item>
                <el-menu-item index="3">留言反馈</el-menu-item>
                <el-menu-item index="4">个人中心</el-menu-item>
            </el-menu>
            <div class="container">
                <div class="lunbo" @mouseenter="clear" @mouseleave="run">
                    <div class="img">
                        <img :src="dataList[currentIndex]" alt="" style="width: 100%; height:250px" />
                    </div>
                    <div class="right turn" @click="next()">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="left turn" @click="up()">
                        <i class="el-icon-arrow-left"></i>
                    </div>
                </div>
            </div>
            <el-tag class="labelTag">
                <span class="text-container">MESSAGE/ADVICE</span>
                <span class="text-container">留言反馈</span>
            </el-tag>

            <div class="message-container">
                <label>留言</label>
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea">
                </el-input>
            </div>

            <div class="button">
                <el-button type="warning" @click="submit">提交</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
            </div>

            <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="原密码" prop="password">
                        <el-input v-model="ruleForm.password" style="width:250px" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="password1">
                        <el-input v-model="ruleForm.password1" style="width:250px" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


        </el-main>
    </el-container>
</template>


<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
const token = sessionStorage.getItem('token')
export default {
    data() {
        return {
            img: require('@/assets/logo.jpg'),
            activeIndex: '3',
            dataList: [
                'https://pic4.zhimg.com/v2-3fad3b71721d643c918742fe2e75b943_1440w.jpg',
                'https://img.zcool.cn/community/0115a95cf34601a801205e4b189a2a.jpg@1280w_1l_2o_100sh.jpg',
                'https://www.mailizc.com/data/u353230/weixin_article__7_1544164704236.jpg'
            ],
            currentIndex: 0, // 默认显示图片
            timer: null, // 定时器
            textarea:'',
            ruleForm: {
                password: '',
                password1: '',
            },
            dialogVisible: false,
            rules: {
                password: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                password1: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        handleCommand(command) {
            switch (command) {
                case 'ChangePassword':
                    this.dialogVisible = true;
                    break;
                case 'LoginOut':
                    this.$router.push({ name: "login" });
                    break;
                default:
                    console.log('未知命令');
            }
        },
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "home" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "house" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "message" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "center" });
                    break;
            }
        },
        submitForm(ruleForm) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    axios.get(`/user/changePassword/${ruleForm.password}/${ruleForm.password1}`, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(res => {
                        if (res.data.msg == "success") {
                            this.$message({
                                message: "修改成功",
                                type: "success"
                            })
                            this.ruleForm.password = '';
                            this.ruleForm.password1 = '';
                            this.dialogVisible = false;
                        } else {
                            this.$message({
                                message: "密码错误",
                                type: "error"
                            })
                        }
                    })
                } else {
                    this.$message({
                        message: "请输入密码",
                        type: "error"
                    })
                    return false;
                }
            });
        },
        submit() {
            if (this.textarea == '') {
                this.$message({
                    message: '请输入内容',
                    type: 'error'
                })
            } else {
                const message = { content: this.textarea };
                axios.post("/user/message", message, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(result => {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.textarea = '';
                })
            }

        },
        reset(){
            this.textarea='';
        },
        next() {
            if (this.currentIndex === this.dataList.length - 1) {
                this.currentIndex = 0
            } else {
                this.currentIndex++
            }
        },
        up() {
            if (this.currentIndex === 0) {
                this.currentIndex = this.dataList.length - 1
            } else {
                this.currentIndex--
            }
        },
        clear() {
            clearInterval(this.timer)
        },
        // 定时器
        run() {
            this.timer = setInterval(() => {
                this.next()
            }, 2000)
        },
    }
}
</script>

<style scoped>
.el-header,
.el-footer {
    background-color: rgb(200, 50, 50);
    color: #333333;
    text-align: center;
    line-height: 60px;
}
.logo {
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-right: 15px;
}
.s1 {
    font-size: 20px;
    float: left;
    margin: auto;
    color: #FFFFFF;
}
.s2 {
    float: right;
}
.el-menu--horizontal>.el-menu-item.is-active,
.el-menu--horizontal>.el-menu-item {
    border-bottom: none;
}

.el-menu-item.is-active {
    background-color: rgb(150, 5, 5) !important;
}
.container {
    position: relative;
    width: 100%;
    padding: 0;
}

.turn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #d0d0d073;
}

.right {
    position: absolute;
    top: 100px;
    right: 0;
}

.left {
    position: absolute;
    top: 100px;
    left: 0;
}

.current {
    color: gray;
} 
.tag-group {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.labelTag {
    display: flex;
    flex-direction: column;
    /* 使子元素垂直排列 */
    justify-content: center;
    /* 垂直居中子div */
    background-color: hsl(42, 62%, 49%);
    margin: 10px auto;
    width: 80%;
    height: 60px;
}

.text-container {
    display: flex;
    /* 使文字在div中垂直居中 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    color: white;
    flex: 1;
    /* 使div充满可用空间，但不会导致内容溢出 */
    font-size: 14px;
    /* 根据需要调整文字大小 */
    overflow: hidden;
    /* 防止内容溢出） */
}
.message-container {  
    display: flex; /* 启用Flexbox */  
    align-items: center; /* 垂直居中子元素 */  
    gap: 10px; /* 在子元素之间添加间隔 */  
    margin: 30px auto;
    width: 50%;
    height: 100px;   
}  
.el-textarea__inner{
    font-size: 16px;
    font-weight: bold;
}
.button{
    display: flex; 
    justify-content: center; 
}


</style>